<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="username">
      <Input v-model="form.username" clearable placeholder="请输入手机号" />
      <span slot="prepend">
        <Icon :size="16" type="ios-person"></Icon>
      </span>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" password v-model="form.password" placeholder="请输入验证码" />
      <span slot="prepend">
        <Icon :size="14" type="md-lock"></Icon>
      </span>
    </FormItem>
    <FormItem> <silder :successFun="successFun" :errorFun="errorFun" @Sccess="Sccess"></silder></FormItem>
   
    <FormItem id="fromDiv1">
      <span></span>
      <span> <a href="">去注册></a> </span>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long :disabled="isdisabledFn">登录</Button>
    </FormItem>
  </Form>
</template>
<script>
import silder from '../components/SilderLogin'
export default {
  components: {
    silder,
  },
  name: 'LoginForm',
  props: {
    usernameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '手机号不能为空', trigger: 'blur' }]
      },
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
    },
  },
  data() {
    return {
      form: { username: '', password: '' },
      status: false,
      isdisabledFn: true,
    }
  },
  computed: {
    rules() {
      return { username: this.usernameRules, password: this.passwordRules }
    },
  },
  methods: {
    successFun() {
    },
    errorFun() {
    },
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$emit('on-success-valid', { username: this.form.username, password: this.form.password })
        }
      })
    },
    Sccess(res) {
      this.isdisabledFn = res
    },
  },
}
</script>
